<template>
	<view id="tabBar">
		<view class="contentT">
			<span class="tabbar-item"
			    v-for="(item, index) in list" 
			    :key="index" 
			    @click="tabbarChange(item.path)"
			>
				<view class="img">
					<image class="item-img" :src="item.icon_a" mode="aspectFit" v-if="current == index"></image>
					<image class="item-img" :src="item.icon"  mode="aspectFit" v-else></cover-image>
				</view>
			    <view class="item-name" :class="{'tabbarActive': current == index}" v-if="item.text">{{item.text}}</view>
			</span>
		</view>
	</view>
</template>

<script>
export default {
    props: {
		name:"tabBar",
        current: 0,
    },
    data() {
        return {
			list: [{
			        text: '首页',  
			        icon: '/static/tabicon/bottom1.png',  //未选中图标
			        icon_a: '/static/tabicon/bottom1_active.png',  //选中图片
			        path: "/pages/index/index",  //页面路径
			    },{
			        text: '购买',
			        icon: '/static/tabicon/bottom2.png',
			        icon_a: '/static/tabicon/bottom2_active.png',
			        path: "/pages/buy/buy",
			    }
			    ,{
			        text: '帮助',
			        icon: '/static/tabicon/bottom3.png',
			        icon_a: '/static/tabicon/bottom3_active.png',
			        path: '/pages/help/help',
			    },{
			        text: '提取',
			        icon: '/static/tabicon/bottom5.png',
			        icon_a: '/static/tabicon/bottom5_active.png',
			        path: '/pages/getIp/getIp',
			    },{
			        text: '我的',
			        icon: '/static/tabicon/bottom4.png',
			        icon_a: '/static/tabicon/bottom4_active.png',
			        path: "/pages/user/user",
			    },
			]
        };
    },
    created() {
        let that = this;
    },
    methods: {
        tabbarChange(path) {
			uni.switchTab({
			    url: path
			});
        }
    }
};
</script>
<style lang="less" scoped>
#tabBar{
	width: 100%;
	height: 100rpx;
	background: #000000;
	position: fixed;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
	.contentT{
		width: 100%;
		height: 80rpx;
		margin: 0 auto;
		position: fixed;
		bottom: 0rpx;
		left: 0;
		background-color: rgb(255, 255, 255);
		padding: 0;
		padding-top: 12rpx;
		padding-bottom: 12rpx;
		z-index: 1000;
		overflow: hidden;
		.tabbar-item{
			display: inline-block;
			width: 20%;
			text-align: center;
			font-size: 24rpx;
			color: #7A7E83;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.item-name{
			margin-top: 12rpx;
		}
		.img{
			width: 40rpx;
			height: 40rpx;
			margin: 0 auto;
		}
		.tabbarActive{
			color: #222;
		}
	}
</style>
